<template>
    <div id="container">
      <nav-bar-item path="/products/productProfile">
        <div slot="img">
            <el-image
              style="width: 300px; height: 200px"
              :src="url1"></el-image>
        </div>
        <div slot="text" ><el-link >操作系统</el-link></div>
      </nav-bar-item>

      <nav-bar-item path="/products/productProfile">
        <div slot="img">
          <el-image
            style="width: 300px; height: 200px"
            :src="url2"></el-image>
        </div>
        <div slot="text" ><el-link >操作系统</el-link></div>
      </nav-bar-item>

      <nav-bar-item path="/products/productProfile">
        <div slot="img">
          <el-image
            style="width: 300px; height: 200px"
            :src="url3"></el-image>
        </div>
        <div slot="text" ><el-link >操作系统</el-link></div>
      </nav-bar-item>


    </div>
</template>

<script>
    import NavBarItem from "../../../common/navBarItem/navBaritem";
    export default {
        name: "container",
      components: {NavBarItem},
      data(){
          return {
              url1: require("assets/img/container1.jpg"),
              url2: require("assets/img/container2.jpg"),
              url3: require("assets/img/container3.jpg"),
          }
      }
    }
</script>

<style scoped>
  #container{
    display: flex;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: 49px;
    background-color: #f8f8f8;
    padding-top: 30px;
    margin-top: 0;
  }

</style>
